<template>
  <div style="background: white;height: 500px;">
    <div>
      <a-form :form="form">
        <a-row>
          <a-col :span="5">
            <div style="font-size: 16px;margin-top: 20px;margin-bottom:20px;margin-left:20px;color:#1890FF">
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="11" :sm="22">
            <a-form-item label="车辆类型名称:" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-col :span="16">
                <a-select style="width: 100%;" v-decorator="['selectedCarTypeId',{}]" @change="carTypeNameChange" :options="carTypeList">
                </a-select>
              </a-col>
            </a-form-item>
            <a-form-item label="区域名称:" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
              <a-col :span="16">
                <a-select labelInValue style="width: 100%;" v-decorator="['selectedAreaId',{initialValue:{value:'',label:'无区域'}}]" @change="areaIdChange" :options="areaIdList">
                </a-select>
              </a-col>
            </a-form-item>
            <a-form-item
              label="文件:"
              :label-col="{ span: 4,style:'height: 35px' }"
              :wrapper-col="{ span: 20,style:'height: 35px' }">
              <a-col
                style="height: 100%"
                :span="16">
                <a-row>
                  <a-col :span="18">
                    <p style="background-color: #EEEEEE;padding-left: 10px;line-height:32px;margin-top:4px;margin-bottom:0px;font-size:14px">
                      {{ fileName }}</p>
                  </a-col>
                  <a-col :span="6">
                    <a-upload accept=".xlsx,.xls" :file-list="fileList" style="width: 100%" :before-upload="beforeUpload" :showUploadList="false">
                      <a-button size="default" style="width: 100%" class="colsty1">
                        <a-icon type="folder-open" />
                        选择
                      </a-button>
                    </a-upload>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :offset="1" :span="7">
                <a-row>
                  <a-col :span="24">
                    <p style="font-size: 15px;margin-top:0px;margin-bottom: 0px ;color: red">表格中的数据最大为500条</p>
                  </a-col>
                </a-row>
              </a-col>
            </a-form-item>

            <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="文件模板:">
              <a-button :ghost="true" class="colsty2" size="default" @click="handleExportXls('月租车信息模板')">
                <a-icon type="folder-open"/>
                <span>点击下载模板</span>
              </a-button>
            </a-form-item>

          </a-col>
        </a-row>
        <a-form-item :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }">
          <a-button
            class="colsty1"
            size="default"
            :disabled="fileList.length === 0"
            :loading="uploading"
            style="margin-left:9%"
            @click="handleUpload">
            <a-icon type="upload"/>
            <span>开始导入</span>
          </a-button>
        </a-form-item>

      </a-form>
    </div>
  </div>
</template>

<script>
import {downFile, getAction, uploadAndDownFile} from "@api/manage";

export default {
  name: "MonthlyRentalCarInfoImport",
  components: {
  },
  data() {
    return {

      fileList: [],
      uploading: false,
      form: this.$form.createForm(this),
      parkList: [],
      carTypeList: [],
      areaIdList:[{value:"",label:"无区域"}],
      selectedCarTypeId: "",
      selectedAreaId:"",
      parkCode: "",
      parkName: "",
      fileName: "请选择文件",
      headers: {
        authorization: 'authorization-text',
      },
      url: {
        exportXlsUrl1: "/parkCar/parkCarMonthly/exportXls",
        importExcelUrl1: "/parkCar/parkCarMonthly/importExcel",
        getMonCarTypeList: "/parkCar/parkCarMonthly/getMonCarTypeList",
        getAreaIdList:"/area/parkAreaInfo/getAreaInfos",
      },
    };
  },
  mounted() {
    this.initMonCarTypeList();
  },
  methods: {
    carTypeNameChange(index) {
      this.selectedCarTypeId = index;
    },
    areaIdChange(index){
      this.selectedAreaId = index;
    },
    initMonCarTypeList() {
      const that = this
      getAction(this.url.getMonCarTypeList, {}).then(res => {
        if (res.success) {
          that.carTypeList = []
          res.result.forEach((car)=>{
            that.carTypeList.push({
              value:car.id,
              label:car.carTypeName
            })
          })
          that.selectedCarTypeId = that.carTypeList[0].value
          that.form.setFieldsValue({selectedCarTypeId:this.selectedCarTypeId})
        } else {
          this.$message.error(res.message);
        }
      })
      that.initAreaIdList()
    },
    initAreaIdList(){
      const that = this
      getAction(this.url.getAreaIdList,{}).then(res=>{
        if (res.success){
          that.areaIdList = [{value:"",label:"无区域"}]
          res.result.forEach((area)=>{
            that.areaIdList.push({
              value:area.id,
              label:area.areaName
            })
          })
        }else {
          this.$message.error(res.message);
        }
      })
    },


    beforeUpload(file) {
      this.fileName = file.name;
      this.fileList = [...this.fileList, file];
      return false;
    },
    handleUpload() {

      const {fileList} = this;
      const formData = new FormData();
      fileList.forEach(file => {
        formData.set("files[]", file);
      });
      this.$nextTick(() => {
        if(this.carTypeList.length===0){
          this.$message.warning("请先添加月租车车辆类型");
          return
        }
        formData.append("carTypeId", this.selectedCarTypeId)
        formData.append("areaId",this.selectedAreaId.key)
        formData.append("areaName",this.selectedAreaId.label)
        this.uploading = true;
        uploadAndDownFile(this.url.importExcelUrl1, formData).then((data) => {
          if (typeof window.navigator.msSaveBlob !== 'undefined') {
            window.navigator.msSaveBlob(new Blob([data]), '月租车导入结果' + '.xls')
          } else {
            let url = window.URL.createObjectURL(new Blob([data]))
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            link.setAttribute('download', '月租车导入结果' + '.xls')
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link);
            window.URL.revokeObjectURL(url);
          }
          this.uploading = false;
        })
      })
    },
    handleChange(info) {
      if (info.file.status === 'done') {
        this.$message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} file upload failed.`);
      }
    },

    handleExportXls(fileName) {

      downFile(this.url.exportXlsUrl1, {}).then((data) => {
        if (!data) {
          this.$message.warning("文件下载失败")
          return
        }
        if (typeof window.navigator.msSaveBlob !== 'undefined') {
          window.navigator.msSaveBlob(new Blob([data]), fileName + '.xls')
        } else {
          let url = window.URL.createObjectURL(new Blob([data]))
          let link = document.createElement('a')
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', fileName + '.xls')
          document.body.appendChild(link)
          link.click()
          document.body.removeChild(link);
          window.URL.revokeObjectURL(url);
        }
      })
    },
  },
}
</script>

<style scoped>

.colsty1 {
  background: #1890FF;
  color: white;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  border-width: 0px;

}

.colsty2 {
  color: #1890FF;
}
/deep/ .ant-upload.ant-upload-select.ant-upload-select-text {
  width: 100%;
}
</style>
